<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <jsp:useBean id="show" class="com.bookshopsystem.service.DataShow"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style/css/head.css" />
<link rel="stylesheet" type="text/css" href="style/css/footer.css" />
<link rel="stylesheet" type="text/css" href="style/css/index.css" />
<script type="text/javascript" src="style/js/jquery.js"></script>
<script type="text/javascript" src="style/js/user.js"></script>
<script type="text/javascript" src="style/js/book.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
	$("#content .new_books .nav2 .list").slideDown(1000);
	var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
	var len = $("#focus ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	//以下代码添加数字按钮和按钮后的半透明长条
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span>" + (i+1) + "</span>";
	}
	btn += "</div>"
	$("#focus").append(btn);
	$("#focus .btnBg").css("opacity",0.5);
	
	//为数字按钮添加鼠标滑入事件，以显示相应的内容
	$("#focus .btn span").mouseenter(function() {
		index = $("#focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");
	
	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#focus ul").css("width",sWidth * (len + 1));
	
	//鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
	$("#focus ul li div").hover(function() {
		$(this).siblings().css("opacity",0.7);
	},function() {
		$("#focus ul li div").css("opacity",1);
	});
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
				showFirPic();
				index = 0;
			} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
				showPics(index);
			}
			index++;
		},3000); //此3000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#focus ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position
		$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
	}
	
	function showFirPic() { //最后一张图自动切换到第一张图时专用
		$("#focus ul").append($("#focus ul li:first").clone());
		var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
		$("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {
			//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
			$("#focus ul").css("left","0");
			$("#focus ul li:last").remove();
		}); 
		$("#focus .btn span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
	}
});
</script>
<title>HOME</title>
</head>
<body>
<%@ include file="pages/head.jsp" %>
<div id="content">
	<div class="new_books">
		<div class="nav2">
		<div class="list">
			<ul>
				<h3>文学</h3>
				<li>小说</li>
				<li>传记</li>
				<li>青春文学</li>
				<li class="end">动漫</li>
			</ul>
			<ul>
				<h3>少儿</h3>
				<li>儿童文学</li>
				<li>科普</li>
				<li>绘本</li>
				<li class="end">童书优惠</li>
			</ul>
			<ul>
				<h3>教育</h3>
				<li>外语学习</li>
				<li>考试</li>
				<li>中小学教辅</li>
				<li>大中专教材辅助</li>
				<li class="end">工具书/字典词典</li>
			</ul>
			<ul>
				<h3>管理</h3>
				<li>管理</li>
				<li>经济</li>
				<li>投资</li>
				<li class="end">电子商务</li>
			</ul>
			<ul>
				<h3>励志与成功</h3>
				<li>人在职场</li>
				<li>女性励志</li>
				<li>成功学</li>
				<li>人际与社交</li>
				<li class="end">心灵鸡汤</li>
			</ul>
			<ul>
				<h3>人文社科</h3>
				<li>历史</li>
				<li>哲学宗教</li>
				<li>政治军事</li>
				<li>国学</li>
				<li>古籍</li>
				<li>文化</li>
				<li>社会</li>
				<li>科学</li>
				<li>心理学</li>
				<li class="end">法律</li>
			</ul>
			<ul>
				<h3>生活</h3>
				<li>家教</li>
				<li>育儿</li>
				<li>孕产</li>
				<li>健身保健</li>
				<li>旅游</li>
				<li>地图</li>
				<li>美食</li>
				<li>手工DIY</li>
				<li>美妆</li>
				<li>时尚生活</li>
				<li>家居</li>
				<li>两性</li>
				<li class="end">体育运动</li> 
			</ul>
			<ul>
				<h3>艺术</h3>
				<li>摄影</li>
				<li>设计</li>
				<li>绘画</li>
				<li class="end">连环画</li>
			</ul>
			<ul>
				<h3>科技</h3>
				<li>科普读物</li>
				<li>工业技术</li>
				<li>建筑设计</li>
				<li>医学健康</li>
				<li>电子/通信</li>
				<li class="end">农业/林业</li>
			</ul>
			<ul>
				<h3>计算机与互联网</h3>
				<li>编程语言</li>
				<li>办公软件</li>
				<li>图形图像</li>
				<li>网络与通信</li>
				<li>数据库</li>
				<li class="end">操作系统</li>
			</ul>
			</div>
		</div>
		<div class="nav3">
			<div id="focus">
				<ul>
					<li>
						<div><a href="#"><img src="style/img/a1.jpg" /></a></div>
						<div style="left: 780px"><a href="#"><img src="style/img/a2.jpg" /></a></div>
						<div style="left: 780px;top:167.5px"><a href="#"><img src="style/img/a3.jpg" /></a></div>
					</li>
					<li>
						<div><a href="#"><img src="style/img/b1.jpg" /></a></div>
						<div style="left: 780px"><a href="#"><img src="style/img/b2.jpg" /></a></div>
						<div style="left: 780px;top:167.5px"><a href="#"><img src="style/img/b3.jpg" /></a></div>
					</li>
					<li>
						<div><a href="#"><img src="style/img/c1.jpg" /></a></div>
						<div style="left: 780px"><a href="#"><img src="style/img/c2.jpg" /></a></div>
						<div style="left: 780px;top:167.5px"><a href="#"><img src="style/img/c3.jpg" /></a></div>
					</li>
					<li>
						<div><a href="#"><img src="style/img/d1.jpg" /></a></div>
						<div style="left: 780px"><a href="#"><img src="style/img/d2.jpg" /></a></div>
						<div style="left: 780px;top:167.5px"><a href="#"><img src="style/img/d3.jpg" /></a></div>
					</li>
					<li>
						<div><a href="#"><img src="style/img/e1.jpg" /></a></div>
						<div style="left: 780px"><a href="#"><img src="style/img/e2.jpg" /></a></div>
						<div style="left: 780px;top:167.5px"><a href="#"><img src="style/img/e3.jpg" /></a></div>
					</li>
					<li>
						<div><a href="#"><img src="style/img/f1.jpg" /></a></div>
						<div style="left: 780px"><a href="#"><img src="style/img/f2.jpg" /></a></div>
						<div style="left: 780px;top:167.5px"><a href="#"><img src="style/img/f3.jpg" /></a></div>
					</li>
				</ul>
			</div>
		</div>
		<div class="left">
			<h1>新书上架</h1>
			<c:forEach items="${show.getNewBooks()}" var="book">
				<dl>
					<dd><a title="${book.title}" href="pages/bookInfo.jsp?book=${book.id}" target="_blank"><img src="style/img/book_logo/${book.picPath}" /></a></dd>
					<dt class="title"><a title="${book.title}" href="pages/bookInfo.jsp?book=${book.id}" target="_blank">${book.title}</a></dt>
					<dt class="price">￥${book.unprice}</dt>
				</dl>
			</c:forEach>
		</div>
		<div class="right">
			<h1>新书畅销榜</h1>
			<ul>
				<c:forEach items="${show.getNewBooksTop()}" var="book" varStatus="idxStatus">
					<li><span>${idxStatus.index+1}</span><a title="${book.title}" href="pages/bookInfo.jsp?book=${book.id}" target="_blank">${book.title}</a></li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<div class="host_books">
		<div class="left">
			<h1>图书推荐</h1>
			<c:forEach items="${show.getHostBooks()}" var="book">
				<dl>
					<dd><a title="${book.title}" href="pages/bookInfo.jsp?book=${book.id}" target="_blank"><img src="style/img/book_logo/${book.picPath}" /></a></dd>
					<dt class="title"><a title="${book.title}" href="pages/bookInfo.jsp?book=${book.id}" target="_blank">${book.title}</a></dt>
					<dt class="price">￥${book.unprice}</dt>
				</dl>
			</c:forEach>
		</div>
		<div class="right">
			<h1>图书畅销榜</h1>
			<ul>
				<c:forEach items="${show.getHostBooksTop()}" var="book" varStatus="idxStatus">
					<li><span>${idxStatus.index+1}</span><a title="${book.title}" href="pages/bookInfo.jsp?book=${book.id}" target="_blank">${book.title}</a></li>
				</c:forEach>
			</ul>
		</div>
	</div>
</div>
<%@ include file="pages/footer.jsp" %>
</body>
</html>
